<script setup>
import { defineEmits, defineProps, onMounted, ref } from 'vue'
import { listUser } from '@/api/system/user.js'

const baseUrl = import.meta.env.VITE_UPLOAD_API

const emits = defineEmits(['cancleClick', 'confirmClick'])

const props = defineProps({
  value: {
    type: Array,
    required: false,
  },
})

const confirmClick = () => {
  emits('confirmClick', form.value)
}

onMounted(async () => {
  if (props.value) {
    form.value = props.value
  }
  console.log(form.value)
  userList.value = (await listUser({ pageNum: 1, pageSize: 9999 })).rows
})

const userList = ref([])

const form = ref([
  {
    selectType: '上级',
    selection: '',
  },
])

const addOption = () => {
  form.value.push({
    selectType: '上级',
  })
}
const removeCurrentOption = (index) => {
  form.value.splice(index, 1)
}
</script>

<template>
  <el-form ref="shenpiForm" :model="form">
    <el-form-item>
      <span
        v-for="(item, index) in form"
        style="width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 12px"
      >
        <div style="display: flex; justify-content: space-between; align-items: center">
          <el-radio-group v-model="item.selectType">
            <el-radio label="上级" value="上级">上级</el-radio>
            <el-radio label="部门负责人" value="部门负责人">部门负责人</el-radio>
            <el-radio label="角色" value="角色">角色</el-radio>
            <el-radio label="指定成员" value="指定成员">指定成员</el-radio>
          </el-radio-group>
          <el-button circle icon="Delete" plain @click="removeCurrentOption(index)"></el-button>
        </div>
        <el-select
          v-if="item.selectType === '上级'"
          v-model="item.selection"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="直属上级" value="直属上级"></el-option>
        </el-select>
        <el-select
          v-if="item.selectType === '部门负责人'"
          v-model="item.selection"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="直属部门负责人" value="直属部门负责人"></el-option>
          <el-option label="分公司总经理" value="分公司总经理"></el-option>
        </el-select>
        <el-select
          v-if="item.selectType === '角色'"
          v-model="item.selection"
          placeholder="请选择"
          style="width: 100%"
        >
          <!--          <el-option label="设计师" value="设计师"></el-option>-->
          <el-option label="职能经理" value="职能经理"></el-option>
          <!--          <el-option label="业务员" value="业务员"></el-option>-->
          <!--          <el-option label="设计师" value="设计师"></el-option>-->
        </el-select>
        <el-select
          v-if="item.selectType === '指定成员'"
          v-model="item.selection"
          filterable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option v-for="person in userList" :label="person.nickName" :value="person.userId">
            <span style="display: flex; justify-content: space-between; align-items: center">
              <span style="display: flex; justify-content: space-between; align-items: center">
                <el-image
                  :src="baseUrl + person.avatar"
                  style="width: 20px; height: 20px; border-radius: 50%; margin-right: 10px"
                >
                  <template #error>
                    <div
                      style="
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 20px;
                        height: 20px;
                      "
                    >
                      <el-icon><UserFilled /></el-icon>
                    </div>
                  </template>
                </el-image>
                {{ person.nickName }}
              </span>
              <span>
                <el-tag type="info">{{ person.dept.deptName }} </el-tag>
              </span>
            </span>
          </el-option>
        </el-select>
      </span>
    </el-form-item>
  </el-form>
  <div style="display: flex; justify-content: center">
    <el-button icon="Plus" plain type="primary" @click="addOption">添加或签办理人</el-button>
  </div>
  <div style="flex: auto; position: fixed; bottom: 20px; right: 20px">
    <el-button @click="$emit('cancleClick')">取消</el-button>
    <el-button type="primary" @click="confirmClick">确定</el-button>
  </div>
</template>

<style lang="scss" scoped></style>
